<template>
  <div class="header">
    <div class="logo">
      <div class="logo-img">
        <el-image class="imgi" :crossorigin="null" :src="logoUrl" fit="scale-down" />
      </div>
      <div class="logo-content">
        <div class="top-font">
          <span>飞鸟物流</span>
        </div>
        <div class="bottom-font">
          <span>fly-express</span>
        </div>
      </div>
    </div>
    <div class="top-wrapper">
      <el-menu
        :default-active="$route.path"
        class="nav"
        mode="horizontal"
        background-color="none"
        text-color="white"
        router
        active-text-color="none"
      >
        <el-menu-item index="/home">主页</el-menu-item>
        <el-menu-item index="/orderSpecific">订单详情</el-menu-item>
        <el-menu-item index="/order/historyOrder">历史订单</el-menu-item>
        <el-menu-item index="/courierInfo">个人中心</el-menu-item>
        <el-menu-item index="/about">关于我们</el-menu-item>
      </el-menu>
    </div>
    <div class="online-help">
      <el-button class="btn" type="info">在线咨询</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { logoUrl } from "@/common/common";
</script>

<style scoped lang="less">
.header {
  display: flex;
  height: 100%;
  background-image: linear-gradient(to right, #5e88df, #8e4cb7);

  .logo {
    flex: 1.5;

    display: flex;
    justify-content: center;
    align-items: center;

    .logo-img {
      flex: 1;
      height: 90%;

      .imgi {
        height: 100%;
        border-radius: 50%;
      }
    }

    .logo-content {
      flex: 3;
      height: 90%;

      display: flex;
      flex-direction: column;

      .top-font {
        flex: 2;

        display: flex;
        justify-content: flex-start;
        align-items: flex-end;

        span {
          font-size: 1rem;
          font-weight: 700;
        }
      }

      .bottom-font {
        flex: 1.4;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        span {
          font-size: 0.7rem;
          color: rgb(233, 211, 211);
        }
      }
    }
  }

  .top-wrapper {
    flex: 5.5;
    :deep(.el-menu--horizontal) {
      display: block !important;
      --el-menu-hover-bg-color: rgb(220, 202, 202) !important;
    }
  }

  .online-help {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-button.btn {
      background-image: linear-gradient(to right, #fc7841, #f9c328) !important;
      font-size: 0.8rem !important;
    }
  }
}
</style>
